<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>房屋管理</title>
    <link rel="stylesheet" type="text/css" href="https://blog.huangwx.cn/css/sweetalert.css">
    <script type="text/javascript" src="https://blog.huangwx.cn/js/sweetalert-dev.js"></script>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <style style="text:css">

        .container{
            padding-top: 3em;
        }
        .seachinput{
            text-align: right;
        }
        .houstable{
            padding-top: 3em;
        }

    </style>
</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-md-5">
            <button  id="tj"  class="btn btn-info" data-toggle="modal" data-target="#myModal" style="right: 30%">添加</button>
        </div>
        <div class="col-md-3" style="left: 15% ">

            <form class="x-center" action="" style="width:800px">
                <div class="l" style="margin-top: 15px;">

                    <label class="" >楼宇管理</label>
                    <select class="" style="width:100px;height: 30px" id="a1"></select>

                    <label class=""  >单元管理</label>
                    <select class="" style="width:100px;height: 30px" id="a2"></select>

                    <button type="button" class="btn btn-info" style="width:80px;height: 32px" id="btn">综合查询</button>
                    <button type="button" class="btn btn-info" style="width:80px;height: 32px" id="sx">刷新</button>
                </div>
            </form>
        </div>
    </div>
    <div class="row houstable">
        <table class="table table-bordered" id="tbody">
            <thead>
            <tr>
                <th><input type="checkbox" id="checkbox2"></th>
                <td>房屋编号</td>
                <td>楼宇</td>
                <td>单元号</td>
                <td>所在层数</td>
                <td>房号</td>
                <td>建筑面积</td>
                <td>套内面积</td>
                <td>公摊面积</td>
                <td >房屋类型</td>
                <td>房屋户型</td>
                <td>房屋朝向</td>
                <td>交房时间</td>
                <td>产权年限</td>
                <td>备注</td>
                <td>房屋状态</td>
                <td>住户</td>
                <td>操作</td>
            </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
    </div>
</div>

<!-- 添加模态框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel" id="fan">添加房屋</h4>
            </div>
            <div class="modal-body">
                <div class="container-fluid">
                    <div class="col-md-6">
                        <div class="input-group">
                            <span class="input-group-addon">楼宇</span>
                            <select class="form-control" style="width:158px ;height: 30px;" id="louyuxiala"></select>
                        </div>
                        <br>
                        <div class="input-group">
                            <span class="input-group-addon">单元号</span>
                            <select class="form-control" style="width:158px ;height: 30px;" id="danyuanhao"></select>
                        </div>
                        <br>
                        <div class="input-group">
                            <span class="input-group-addon">所在层数</span>
                            <input type="number" type="text" class="form-control" placeholder="请输入.." id="cengshu">

                        </div>
                        <br>
                        <div class="input-group">
                            <span class="input-group-addon">房号</span>
                            <input type="number" type="text" class="form-control" placeholder="请输入.." id="hanghao">
                        </div>
                        <br>
                        <div class="input-group">
                            <span class="input-group-addon">建筑面积</span>
                            <input type="number" type="text" class="form-control" placeholder="请输入.." id="jzmj">
                        </div>
                        <br>
                        <div class="input-group">
                            <span class="input-group-addon">套内面积</span>
                            <input type="number"  class="form-control" placeholder="请输入.." id="tnmj">
                        </div>
                        <br>
                        <div class="input-group">
                            <span class="input-group-addon">公摊面积</span>
                            <input type="number"  class="form-control" placeholder="请输入.." id="gtmj">
                        </div>
                        <br>
                    </div>
                    <div class="col-md-6">
                        <div class="input-group">
                            <span class="input-group-addon">房屋类型</span>
                            <input type="text" class="form-control" placeholder="请输入.." id="fwlx">
                        </div>

                        <br>
                        <div class="input-group">
                            <span class="input-group-addon">房屋户型</span>
                            <input type="text" class="form-control" placeholder="请输入.." id="fwhx">
                        </div>
                        <br>
                        <div class="input-group">
                            <span class="input-group-addon">房屋朝向</span>
                            <input type="text" class="form-control" placeholder="请输入.." id="fwcx">
                        </div>
                        <br>
                        <div class="input-group">
                            <span class="input-group-addon">交房时间</span>
                            <input type="date" class="form-control" placeholder="请输入.." id="jfsj">
                        </div>
                        <br>
                        <div class="input-group">
                            <span class="input-group-addon">产权年限</span>
                            <input type="number" type="text" class="form-control" placeholder="请输入.." id="cqnx">
                        </div>
                        <br>
                        <div class="input-group">
                            <span class="input-group-addon">备注</span>
                            <input type="text" class="form-control" placeholder="请输入.." id="beizhu">
                        </div>
                        <br>
                        <div class="input-group">
                            <span class="input-group-addon">住户</span>
                            <select class="form-control" style="width:158px ;height: 30px;" id="zhuhu">
                                <option value="0">请选择</option>
                            </select>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" id="tijiao" >提交更改</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- 模态框结尾 -->
</div>

<!-- 修改模态框（Modal） -->
<div class="modal fade" id="xg" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel1" id="fan1">修改房屋</h4>
            </div>
            <div class="modal-body">
                <div class="container-fluid">
                    <div class="col-md-6">
                        <div class="input-group">
                            <span class="input-group-addon">楼宇</span>
                            <select class="form-control" style="width:158px ;height: 30px;" id="louyuxiala1"></select>
                        </div>
                        <br>
                        <div class="input-group">
                            <span class="input-group-addon">单元号</span>
                            <select class="form-control" style="width:158px ;height: 30px;" id="danyuanhao1"></select>
                        </div>
                        <br>
                        <div class="input-group">
                            <span class="input-group-addon">所在层数</span>
                            <input type="text" class="form-control" placeholder="请输入.." id="cengshu1">

                        </div>
                        <br>
                        <div class="input-group">
                            <span class="input-group-addon">房号</span>
                            <input type="text" class="form-control" placeholder="请输入.." id="hanghao1">
                        </div>
                        <br>
                        <div class="input-group">
                            <span class="input-group-addon">建筑面积</span>
                            <input type="text" class="form-control" placeholder="请输入.." id="jzmj1">
                        </div>
                        <br>
                        <div class="input-group">
                            <span class="input-group-addon">套内面积</span>
                            <input type="text" class="form-control" placeholder="请输入.." id="tnmj1">
                        </div>
                        <br>
                        <div class="input-group">
                            <span class="input-group-addon">公摊面积</span>
                            <input type="text" class="form-control" placeholder="请输入.." id="gtmj1">
                        </div>
                        <br>
                    </div>
                    <div class="col-md-6">
                        <div class="input-group">
                            <span class="input-group-addon">房屋类型</span>
                            <input type="text" class="form-control" placeholder="请输入.." id="fwlx1">
                        </div>

                        <br>
                        <div class="input-group">
                            <span class="input-group-addon">房屋户型</span>
                            <input type="text" class="form-control" placeholder="请输入.." id="fwhx1">
                        </div>
                        <br>
                        <div class="input-group">
                            <span class="input-group-addon">房屋朝向</span>
                            <input type="text" class="form-control" placeholder="请输入.." id="fwcx1">
                        </div>
                        <br>
                        <div class="input-group">
                            <span class="input-group-addon">交房时间</span>
                            <input type="date" class="form-control" placeholder="请输入.." id="jfsj1">
                        </div>
                        <br>
                        <div class="input-group">
                            <span class="input-group-addon">产权年限</span>
                            <input type="text" class="form-control" placeholder="请输入.." id="cqnx1">
                        </div>
                        <br>
                        <div class="input-group">
                            <span class="input-group-addon">备注</span>
                            <input type="text" class="form-control" placeholder="请输入.." id="beizhu1">
                        </div>
                        <br>
                        <div class="input-group">
                            <span class="input-group-addon">住户</span>
                            <select class="form-control" style="width:158px ;height: 30px;" id="zhuhu1"></select>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" id="tijiao1" >提交更改</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- 模态框结尾 -->
</div>



<input id="ccc" hidden>
<script type="text/javascript">
    /**
     * 封装循环显示方法
     * @param data
     */
    function getinfo(data) {
        for (let i = 0; i < data.length; i++) {
            let tr = document.createElement("tr");
            let td1 = document.createElement("td");
            $(td1).append("<input type=\"checkbox\" id=\"checkbox2\">");
            let td2 = document.createElement("td");
            $(td2).append(data[i].hid);
            let td3 = document.createElement("td");
            $(td3).append(data[i].ttname);
            let td4 = document.createElement("td");
            $(td4).append(data[i].uname);
            let td5 = document.createElement("td");
            $(td5).append(data[i].hfloor);
            let td6 = document.createElement("td");
            $(td6).append(data[i].honame);
            let td7 = document.createElement("td");
            $(td7).append(data[i].hbuild);
            let td8 = document.createElement("td");
            $(td8).append(data[i].hinside);
            let td9 = document.createElement("td");
            $(td9).append(data[i].hequally);
            let td10 = document.createElement("td");
            $(td10).append(data[i].hmold);
            let td11 = document.createElement("td");
            $(td11).append(data[i].htype);
            let td12 = document.createElement("td");
            $(td12).append(data[i].hdirection);
            let td13 = document.createElement("td");
            $(td13).append(data[i].htime);
            let td14 = document.createElement("td");
            $(td14).append(data[i].hyear);
            let td15 = document.createElement("td");
            $(td15).append(data[i].hremarks);
            let td16 = document.createElement("td");
            if(data[i].hname==null){
                $(td16).append("无人住");
            }else{
                $(td16).append("有人住");
            }
            let td17 = document.createElement("td");
            $(td17).append(data[i].hname);
            let td18 = document.createElement("td")


            // $(td18).append("<button type='button' class='btn btn-primary' data-toggle='modal' data-target='#xg' style='height:30px' onclick='xiugai(this)' id='" + data[i].hid + "' ><span class='glyphicon glyphicon-pencil'></span></button>" +
            //     "<button type='button' class='btn btn-danger' style='height:30px' onclick='shach(this,"+data[i].hname+")' id='" + data[i].hid + "'><span class='glyphicon glyphicon-trash'></span></button>");
            //
           let b1= document.createElement("button")
            $(b1).attr("class","btn btn-primary glyphicon glyphicon-pencil ")
            $(b1).on("click",function (){
                $("#xg").modal("show")
                xiugai(data[i].hid)
            })

            let b2= document.createElement("button")
            $(b2).attr("class","btn btn-danger glyphicon glyphicon-trash")
            $(b2).on("click",function (){
                shach(data[i].hid,data[i].hname)
            })

            $(td18).append(b1,"  ",b2)
            $(tr).append(td1, td2, td3, td4, td5, td6, td7, td8, td9, td10, td11,td12, td13,td14,td15,td16,td17,td18);
            $("#tbody").append(tr)
        }
    }
    /**
     * 显示页面
     */
    $.ajax({
        url:"/Afei/getye",
        type:"post",
        dataType:"json",
        success:function (data){
            console.log(data)
            getinfo(data)
        }
    })
    /**
     * 删除
     */
    function shach(hid,str){
        if(str==null){
            alert("无人住")
            if(confirm("删除")){
                $.ajax({
                    url:"/Afei/getshanc",
                    type:"get",
                    data:{hid:hid},
                    dataType:"json",
                    success:function (data){
                        console.log(data)
                        if(data==1){
                            window.location.reload();
                        }else {
                            alert("删除失败")
                        }
                    }
                })

            }
        }else{
            alert("已有人住不能删除")
        }

    }

    $("#sx").on("click",function (){
        window.location.reload();
    })

    /**
     * 楼宇下拉获取值
     */
    function  getlouyiuxiala(Object,Object1){
        $.ajax({
            url: "/Afei/getlouyiuxiala",
            type: "get",
            dataType: "json",
            success: function (data) {
                console.log("data1")
                let a=data[0].tid;

                for (let i = 0; i < data.length; i++) {
                    let info = data[i];
                    let newOption = document.createElement("option");
                    $(newOption).attr("value", info.tid);
                    $(newOption).html(info.ttname);
                    $(Object).append(newOption);
                }
                $.ajax({
                    url:"/Afei/gatdanyuan",
                    type: "post",
                    dataType: "json",
                    data:{lyxl:a},
                    success: function (data) {
                        console.log("data")
                        console.log(data)
                        for (let i = 0; i < data.length; i++) {
                            let info = data[i];
                            let newOption = document.createElement("option");
                            $(newOption).attr("value", info.uid);
                            $(newOption).html(info.uname);
                            $(Object1).append(newOption);
                        }

                    }
                })
            }
        })
    }
    window.onload=getlouyiuxiala($("#louyuxiala"),$("#danyuanhao"));
    window.onload=getlouyiuxiala($("#louyuxiala1"),$("#danyuanhao1"));
    window.onload=getlouyiuxiala($("#a1"),$("#a2"));
    /**
     * 添加单元下拉获取值
     */

    $("#louyuxiala").on("change",function (){
        $("#danyuanhao").html("")
        let lyxl=$("#louyuxiala option:selected").val();
        console.log(lyxl)
        $.ajax({
            url:"/Afei/gatdanyuan",
            type: "post",
            dataType: "json",
            data:{lyxl:lyxl},
            success: function (data) {

                for (let i = 0; i < data.length; i++) {
                    let info = data[i];
                    let newOption = document.createElement("option");
                    $(newOption).attr("value", info.uid);
                    $(newOption).html(info.uname);
                    $("#danyuanhao").append(newOption);
                }
            }
        })
    })
    /**
     * 修改单元下拉获取值
     */
    $("#louyuxiala1").on("change",function (){
        $("#danyuanhao1").html("")
        let lyxl=$("#louyuxiala1 option:selected").val();
        console.log(lyxl)
        $.ajax({
            url:"/Afei/gatdanyuan",
            type: "post",
            dataType: "json",
            data:{lyxl:lyxl},
            success: function (data) {
                for (let i = 0; i < data.length; i++) {
                    let info = data[i];
                    let newOption = document.createElement("option");
                    $(newOption).attr("value", info.uid);
                    $(newOption).html(info.uname);
                    $("#danyuanhao1").append(newOption);

                }
            }
        })
    })


    $("#a1").on("change",function (){
        $("#a2").html("")
        let lyxl=$("#a1 option:selected").val();
        console.log(lyxl)
        $.ajax({
            url:"/Afei/gatdanyuan",
            type: "post",
            dataType: "json",
            data:{lyxl:lyxl},
            success: function (data) {
                for (let i = 0; i < data.length; i++) {
                    let info = data[i];
                    let newOption = document.createElement("option");
                    $(newOption).attr("value", info.uid);
                    $(newOption).html(info.uname);
                    $("#a2").append(newOption);

                }
            }
        })
    })



    /**
     * 住户下拉获取值
     */


        $.ajax({
            url: "/Afei/getzhuhiuxiala",
            type: "get",
            dataType: "json",
            success: function (data) {
                for (let i = 0; i < data.length; i++) {
                    let info = data[i];
                    let newOption = document.createElement("option");
                    $(newOption).attr("value", info.aid);
                    $(newOption).html(info.hname);
                    $("#zhuhu").append(newOption);

                    let newOption2 = document.createElement("option");
                    $(newOption2).attr("value", info.aid);
                    $(newOption2).html(info.hname);
                    $("#zhuhu1").append(newOption2);

                }
            }
        })

    /**
     * 判断添加是否有值
     */
    // function jj(){
    //     let lyxl=$("#louyuxiala").val();
    //     let dyxl=$("#danyuanhao").val();
    //     let cengshu=$("#cengshu").val();
    //     let hanghao=$("#hanghao").val();
    //     let jzmj=$("#jzmj").val();
    //     let tnmj=$("#tnmj").val();
    //     let gtmj=$("#gtmj").val();
    //     let fwlx=$("#fwlx").val()
    //     let fwhx=$("#fwhx").val();
    //     let fwcx=$("#fwcx").val();
    //     // let jfsj=$("#jfsj").val();
    //     let cqnx=$("#cqnx").val();
    //     let beizhu=$("#beizhu").val();
    //     let zhuhua=$("#zhuhu").val();
    //     if(lyxl==""|dyxl==""|cengshu==""|hanghao==""|jzmj==""|tnmj==""|gtmj==""|fwlx==""|fwhx==""|fwcx==""|cqnx==""|beizhu==""|zhuhua==""){
    //         $("#tijiao").attr("disabled",true)
    //     }else {
    //         $("#tijiao").attr("disabled",false)
    //     }
    // }
    // $("#tj").on("click",function (){
    //
    //     $("#lyxl").on("keyup",function (){
    //         jj();
    //     })
    //     $("#dyxl").on("keyup",function (){
    //         jj();
    //     })
    //     $("#cengshu").on("keyup",function (){
    //         jj();
    //     })
    //     $("#hanghao").on("keyup",function (){
    //         jj();
    //     })
    //     $("#jzmj").on("keyup",function (){
    //         jj();
    //     })
    //     $("#tnmj").on("keyup",function (){
    //         jj();
    //     })
    //     $("#gtmj").on("keyup",function (){
    //         jj();
    //     })
    //     $("#fwlx").on("keyup",function (){
    //         jj();
    //     })
    //     $("#fwhx").on("keyup",function (){
    //         jj();
    //     })
    //     $("#fwcx").on("keyup",function (){
    //         jj();
    //     })
    //     /*    $("#jfsj").on("click",function (){
    //             console.log("%4")
    //             jj();
    //         })*/
    //     $("#cqnx").on("keyup",function (){
    //         jj();
    //     })
    //     $("#beizhu").on("keyup",function (){
    //         jj();
    //     })
    //     $("#zhuhua").on("keyup",function (){
    //         jj();
    //     })
    //
    // })



    /**
     * 添加房屋
     */

    $("#tijiao").on("click",function (){
        let lyxl=$("#louyuxiala option:selected").val();
        let dyxl=$("#danyuanhao option:selected").val();
        let cengshu=$("#cengshu").val();
        let hanghao=$("#hanghao").val();
        let jzmj=$("#jzmj").val();
        let tnmj=$("#tnmj").val();
        let gtmj=$("#gtmj").val();
        let fwlx=$("#fwlx").val()
        let fwhx=$("#fwhx").val();
        let fwcx=$("#fwcx").val();
        let jfsj=$("#jfsj").val();
        let cqnx=$("#cqnx").val();
        let beizhu=$("#beizhu").val();
        let zhuhua=$("#zhuhu option:selected").val();
        if(zhuhua==0){
            zhuhua=null
        }
        $.ajax({
            url:"/Afei/getyianj",
            type:"post",
            data:{"lyxl":lyxl,"dyxl":dyxl,"cengshu":cengshu,"hanghao":hanghao,"jzmj":jzmj,"tnmj":tnmj,"gtmj":gtmj,"fwlx":fwlx,"fwhx":fwhx,"fwcx":fwcx,"jfsj":jfsj,"cqnx":cqnx,"beizhu":beizhu,"zhuhua":zhuhua},
            dataType:"json",
            success:function (data){
                console.log(data+"asdas")
                if(data==1){
                    alert("添加成功！")
                    window.location.reload();
                }else{
                    alert("添加失败！")
                }
            }

        })

    })

    /**
     * 修改
     */
    function xiugai(hid){
        $("#fan").html("修改")
        $.ajax({
            url:"/Afei/getxg1",
            type:"get",
            data:{td2:hid},
            dataType:"json",
            success:function (data) {
                console.log(data)
                console.log(data.uid)
                $("#louyuxiala1").val(data.tid);
                $("#danyuanhao1").val(data.uid);
                $("#cengshu1").val(data.hfloor);
                $("#hanghao1").val(data.honame);
                $("#jzmj1").val(data.hbuild);
                $("#tnmj1").val(data.hinside);
                $("#gtmj1").val(data.hequally);
                $("#fwlx1").val(data.hmold);
                $("#fwhx1").val(data.htype);
                $("#fwcx1").val(data.hdirection);
                $("#jfsj1").val(data.htime);
                $("#cqnx1").val(data.hyear);
                $("#beizhu1").val(data.hremarks);
                $("#zhuhu1").val(data.aid);

            }
        })
        /**
         * 确认修改
         */
        $("#tijiao1").on("click",function (){

            let lyxl=$("#louyuxiala1 option:selected").val();
            let dyxl=$("#danyuanhao1 option:selected").val();
            let cengshu=$("#cengshu1").val();
            let hanghao=$("#hanghao1").val();
            let jzmj=$("#jzmj1").val();
            let tnmj=$("#tnmj1").val();
            let gtmj=$("#gtmj1").val();
            let fwlx=$("#fwlx1").val()
            let fwhx=$("#fwhx1").val();
            let fwcx=$("#fwcx1").val();
            let jfsj=$("#jfsj1").val();
            let cqnx=$("#cqnx1").val();
            let beizhu=$("#beizhu1").val();
            let zhuhua=$("#zhuhu1 option:selected").val();

            $.ajax({
                url:"/Afei/getixg",
                type:"post",
                data:{"lyxl":lyxl,"dyxl":dyxl,"cengshu":cengshu,"hanghao":hanghao,"jzmj":jzmj,"tnmj":tnmj,"gtmj":gtmj,"fwlx":fwlx,"fwhx":fwhx,"fwcx":fwcx,"jfsj":jfsj,"cqnx":cqnx,"beizhu":beizhu,"zhuhua":zhuhua,"hid":hid},
                dataType:"json",
                success:function (data){
                    console.log(data+"asdas")
                    if(data==1){
                        alert("修改成功！")
                        window.location.reload();
                    }else{
                        alert("修改失败！")
                    }
                }

            })

        })
    }


    /**
     * 查询
     */
    $("#btn").on("click",function (){
        let lycx = $("#a1 option:selected").val();
        let ducx = $("#a2 option:selected").val();
        console.log(lycx,ducx)
        $.ajax({
            url:"/Afei/selecthoses",
            type:"post",
            data:{lycx:lycx,ducx:ducx},
            dataType:"json",
            success:function (data) {
                // $("tbody tr").not('tr:lt(1)').remove();
                $("#tbody tr").not(":first").remove();
                getinfo(data);


                if(data==0){
                    alert("没有此房屋！")
                    window.location.reload();
                }
            }

        })
    })





</script>
</body>
</html>